<template>
    <transition name="el-fade-in">
        <div ref="top" v-if="visible" @click.stop="handleClick" :style="{'right': styleRight,'bottom': styleBottom}" class="el-backtop">
            <!-- <slot>
                <el-icon name="caret-top"></el-icon>
            </slot> -->
            <i class="iconfont icon-zhiding" style="color:#666;"></i>
        </div>
    </transition>
</template>

<script>
    import throttle from 'throttle-debounce/throttle';

    export default {
        name: 'BackTop',  //置顶控件
        props: {
            visibilityHeight: {
                type: Number,
                default: 500
            },
            target: [String],
            right: {
                type: Number,
                default: 40
            },
            bottom: {
                type: Number,
                default: 40
            }
        },

        data() {
            return {
                el: null,
                container: null,
                visible: false
            };
        },

        computed: {
            styleBottom() {
                return `${this.bottom}px`;
            },
            styleRight() {
                return `${this.right}px`;
            }
        },

        mounted() {
            this.init();
            this.throttledScrollHandler = throttle(300, this.onScroll);
            this.container.addEventListener('scroll', this.throttledScrollHandler);
        },

        methods: {
            init() {
                this.container = document;
                this.el = document.documentElement;
                if (this.target) {
                    this.el = document.querySelector(this.target);
                    if (!this.el) {
                    throw new Error(`target is not existed: ${this.target}`);
                    }
                    this.container = this.el;
                }
            },
            onScroll() {
                const scrollTop = this.el.scrollTop;
                this.visible = scrollTop >= this.visibilityHeight;
            },
            handleClick(e) {
                this.scrollToTop();
                this.$emit('click', e);
            },
            scrollToTop() {
                var el = this.el;
                
                var step = 0;
                var interval = setInterval(() => {
                    if (el.scrollTop <= 0) {
                    clearInterval(interval);
                    return;
                    }
                    step += 10;
                    el.scrollTop -= step;
                }, 20);
            }
        },

        beforeDestroy() {
            this.container.removeEventListener('scroll', this.throttledScrollHandler);
        }
    };
</script>
<style scoped lang="scss">
    .el-backtop{
        width: 49px;
        height: 49px;
        color: #000;
        font-size: 20px;
        border-radius: 10px !important;
    }

</style>